<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/echarts.min.js"></script>


</head>

<body>
  <div style="width:600px;height:400px;border:1px solid #ff0000;"></div>
</body>
<script>
  let myChart = echarts.init(document.querySelector("div"))
  let option = {
    //标题
    title: {
      text: "主要疫情国家治愈率",     //标题内容
      textAlign: "center",            //居中对齐
      left: "50%"                       //标题水平位置
    },
    //x轴
    xAxis: {
      type: "value",        //设置x轴为数值轴
    },
    //y轴
    yAxis: [
      //两个坐标轴
      {
        type: "category",     //设置y轴为类目轴
        data: ["美国", "西班牙", "哥伦比亚", "英国", "意大利"],  //有哪些类目

      },
      {
        type: "category",
        data: ["美国", "西班牙", "哥伦比亚", "英国", "意大利"],
        show: false          //类目轴是否显示
      }
    ],
    //系列
    series: [
      {
        type: "bar",        //柱状图
        data: [             //数据
          // 100, 200, 300, 150, 180
          { name: "美国", value: 100 },
          { name: "西班牙", value: 200 },
          { name: "哥伦比亚", value: 300 },
          { name: "英国", value: 150 },
          { name: "意大利", value: 180 },
        ],
        //柱状图的样式
        itemStyle: {
          color: "none",        //柱柱子没有填充色色
          borderColor: "#00c1de",     //柱子的边框颜色
          borderWidth: 3,             //柱子边框宽度
          borderRadius: 20            //柱子圆角
        },
        yAxisIndex: 0,                //系列属于某个类目轴
        //标签
        label: {
          show: true,           //标签是否显示
          color: "white",       //标签文字颜色
          // formatter:"{c}%",
          formatter: function (params) {      //标签内容格式
            // console.log(params.value)
            return params.value
          }

        }

      },
      {
        type: "bar",
        data: [130, 240, 280, 330, 280],
        barWidth: 25,
        itemStyle: {
          borderRadius: 20,
        },
        yAxisIndex: 1,        //重要！！！！！！！！！！！！
      }
    ]
  }
  myChart.setOption(option)
</script>

</html>